@charset "utf-8";
/* CSS Document */
/************************************ 总容器 *************************************/
.wrapper{
	width: 100%;
	height: 100%;
}


/************************************ header part *************************************/
.wrapper header{
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	user-select: none;
	
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	
	display: flex;
	justify-content: center;
	align-items: center;
}


/************************************ order info *************************************/
.wrapper h3{
	width: 100%;
	margin-top: 12vw;
	box-sizing: border-box;
	padding: 4vw 4vw 0;
	user-select: none;
	
	font-size: 4vw;
	font-weight: 300;
	color: #999;
}

.wrapper .order-info{
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;
	font-size: 4vw;
	color: #666;
	user-select: none;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .order-info i{
	cursor: pointer;
	margin-left: 1vw;
}

.wrapper .order-info p:first-child{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.wrapper .order-info p:last-child{
	color: orangered;
}


/************************************ order detailed *************************************/
.wrapper .order-detailed{
	width: 100%;
	user-select: none;
}

.wrapper .order-detailed li{
	box-sizing: border-box;
	padding: 1vw 4vw;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .order-detailed li p{
	font-size: 3vw;
	color: #666;
}


/************************************ payment *************************************/
.wrapper .payment-type{
	width: 100%;
}

.wrapper .payment-type li{
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .payment-type li img{
	width: 33vw;
	height: 13.2vw;
}

.wrapper .payment-type li .fa-check-circle{
	font-size: 5vw;
	color: #38CA73;
	cursor: pointer;
}

.wrapper .payment-button{
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;
	padding-bottom: 14vw;
}

.wrapper .payment-button button{
	width: 100%;
	height: 10vw;
	border: none;
	outline: none;
	border-radius: 4px;
	background-color: #38CA73;
	color: #fff;
	font-size: 3vw;
	cursor: pointer;
}

/************************************ bottom banner *************************************/
.wrapper .footer{
	width: 100%;
	height: 14vw;
	border-top: solid 1px #DDD;
	background-color: #fff;
	
	position: fixed;
	left: 0;
	bottom: 0;
	
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.wrapper .footer li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	color: #999;
	user-select: none;
	cursor: pointer;
}

.wrapper .footer li i{
	font-size: 5vw;
}

.wrapper .footer li p{
	font-size: 2.8vw;
}
